<template>
<div class="template_print">
    <div
        class="print"
        v-for=" (item, index) in printData"
        :key="index"
    >
        <!-- <div :id="'qrcode'+index" style="margin:0 140px;"></div> -->
        <div class="printText">
            <div class="title" v-if="item.plantName">{{item.plantName}}</div>
            <div class="contentTop">
                <div class="content">物料号：{{item.materialCode}}</div>
            </div>
            <div class="contentTop">
                <div class="content">物料名称：{{item.materialName}}</div>
            </div>
            <div class="contentTop">
                <div class="content">规格：{{item.spec}}</div>
                <div class="content">型号：{{item.model}}</div>
            </div>
            <div class="contentTop">
                <div class="content">截面：{{item.predefine1}}</div>
                <div class="content">颜色：{{item.predefine2}}</div>
            </div>
            <div class="contentTop">
                <div class="content">数量（{{item.tmUnitName}}）：{{item.materialQty}}</div>
                <div class="content">次单位（{{item.tmSubunitsName}}）：{{item.weight}}</div>
            </div>
            <div class="contentTop">
                <div class="content">日期：{{item.printDate.slice(0, 10)}}</div>
                <div class="content">批号：{{item.lotno}}</div>
            </div>
            <div class="contentTop">
                <div class="contentBottom">供应商：{{item.supplierCode + '/' + item.supplierName}}</div>
            </div>
            <!-- <div>条码：{{item.barcode}}</div>
            <div>{{item.materialName}}</div>
            <div>{{item.materialCode}}</div> -->
        </div>
        <div :id="keyCode+'qrcode'+index" class="qrcode"></div>
    </div>
</div>
</template>

<script>
import QRcode from "qrcodejs2"

export default {
    components: {},
    props: {
        printData: {
            type: Array,
            default () {
                return []
            }
        },
        keyCode:{
            type:String,
            default:""
        }
    },
    created() {
    },
    mounted() {},
    data() {
        return {}
    },
    methods: {
        qrcode() {
            this.printData.map((x, index) => {
                document.getElementById(this.keyCode+`qrcode${index}`).innerHTML = '';
                let qrcode = new QRcode(this.keyCode+`qrcode${index}`, {
                    width: 128,
                    height: 128,
                    text: `${x.barcode}`
                });
            });
        },
    },
    watch: {
        printData: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.qrcode();
                    })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@page {
    size:100mm 65mm !important;
    margin:2mm;
}
.print {
    // padding-top: 15px;
    width: 100%;
    height: 100%;
    position: relative;
}

.printText {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
}

.contentTop {
    display: flex;
    // margin-left: 15%;
    //justify-content: left;
}

.content {
	flex:1;
    font-size: 10px;
    text-align: left;
}

.contentBottom {
    width: 100%;
    font-size: 10px;
    text-align: left;
}

.qrcode {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: scale(0.32);
    transform-origin: bottom right;
}
</style>
